<template>
  <div>
    <!-- 公共头部 -->
    <header-tab></header-tab>
    <div class="youji">
      <div class="title">
        <p>|2{{ curP }}|蜂首纪念|</p>
      </div>
      <div class="img">
        <div>
          <img :src="images[curP]" alt="" />
          <div v-html="wenzi[curP]"></div>
        </div>
        <div>
          <img
            v-for="(val, i) of smallImages"
            :key="i"
            :src="val"
            alt=""
            @click="curP = i"
          />
        </div>
      </div>
    </div>
    <div v-for="(val, i) of 10" :key="i" class="foot">
      <div>
        <h3>山河可相望，星月亦可追。那篇蔚蓝，是热..</h3>
        <p>Amy_Li.. &nbsp; 在<span>土耳其...</span></p>
      </div>
      <div>
        <img
          src="https://n1-q.mafengwo.net/s16/M00/18/86/CoUBUl8DKGSAUltbABUvmNvlrzo282.jpg?imageMogr2%2Fthumbnail%2F%21390x260r%2Fstrip%2Fgravity%2FCenter%2Fcrop%2F%21390x260%2Fquality%2F90"
          alt=""
        />
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      images: [
        "https://b1-q.mafengwo.net/s17/M00/1A/D7/CoUBXl9rXmKABXEcAAU2-Yg_Z38590.png?imageView2%2F2%2Fw%2F604%2Fh%2F604%2Fq%2F90%7CimageMogr2%2Fstrip%2Fquality%2F90",
        "https://p1-q.mafengwo.net/s17/M00/29/F0/CoUBXl9p4FWAQYV4AASI_tMfd2s409.png?imageView2%2F2%2Fw%2F604%2Fh%2F604%2Fq%2F90%7CimageMogr2%2Fstrip%2Fquality%2F90",
        "https://p1-q.mafengwo.net/s17/M00/E4/26/CoUBXl9off6AcR70AAZhkDYoEnM941.png?imageView2%2F2%2Fw%2F604%2Fh%2F604%2Fq%2F90%7CimageMogr2%2Fstrip%2Fquality%2F90",
        "https://p1-q.mafengwo.net/s17/M00/E4/26/CoUBXl9off6AcR70AAZhkDYoEnM941.png?imageView2%2F2%2Fw%2F604%2Fh%2F604%2Fq%2F90%7CimageMogr2%2Fstrip%2Fquality%2F90",
        "https://p1-q.mafengwo.net/s17/M00/BE/05/CoUBXl9k3HmAUsyDAAT7qOv6JDQ031.png?imageView2%2F2%2Fw%2F604%2Fh%2F604%2Fq%2F90%7CimageMogr2%2Fstrip%2Fquality%2F90",
      ],
      smallImages: [
        "https://b1-q.mafengwo.net/s17/M00/1A/D7/CoUBXl9rXmKABXEcAAU2-Yg_Z38590.png?imageMogr2%2Fthumbnail%2F%21100x100r%2Fstrip%2Fgravity%2FCenter%2Fcrop%2F%21100x100%2Fquality%2F90",
        "https://p1-q.mafengwo.net/s17/M00/29/F0/CoUBXl9p4FWAQYV4AASI_tMfd2s409.png?imageMogr2%2Fthumbnail%2F%21100x100r%2Fstrip%2Fgravity%2FCenter%2Fcrop%2F%21100x100%2Fquality%2F90",
        "https://p1-q.mafengwo.net/s17/M00/E4/26/CoUBXl9off6AcR70AAZhkDYoEnM941.png?imageMogr2%2Fthumbnail%2F%21100x100r%2Fstrip%2Fgravity%2FCenter%2Fcrop%2F%21100x100%2Fquality%2F90",
        "https://b1-q.mafengwo.net/s17/M00/C7/1B/CoUBXl9k5o-ARajeAAcxm27AOhw371.png?imageMogr2%2Fthumbnail%2F%21100x100r%2Fstrip%2Fgravity%2FCenter%2Fcrop%2F%21100x100%2Fquality%2F90",
        "https://p1-q.mafengwo.net/s17/M00/BE/05/CoUBXl9k3HmAUsyDAAT7qOv6JDQ031.png?imageMogr2%2Fthumbnail%2F%21100x100r%2Fstrip%2Fgravity%2FCenter%2Fcrop%2F%21100x100%2Fquality%2F90",
      ],
      wenzi: [
        '<h3>北京 | 最想留住的是故都的秋天</h3><h5>我是<span style="color:#ff9d00">糖衣</span> 我在<span style="color:#ff9d00">北京</span></h5>',
        '<h3>这场旅行，起因是块烧饼！|仙..<h5>我是<span style="color:#ff9d00">走呀六宝</span> 我在<span style="color:#ff9d00">缙云</span></h5>',
        '<h3>俄国18日行记|来看看这个被低..</h3><h5>我是<span style="color:#ff9d00">依云yiyun</span> 我在<span style="color:#ff9d00">俄罗斯</span></h5>',
        '<h3>十一假期出逃，去印尼唱一首盛..</h3><h5>我是<span style="color:#ff9d00">HelloEleven</span> 我在<span style="color:#ff9d00">印度尼西亚</span></h5>',
        '<h3>美哉！新疆！最美的风景在中国..</h3><h5>我是<span style="color:#ff9d00">ZY_FC</span> 我在<span style="color:#ff9d00">新疆</span></h5>',
      ],
      // 记录当前播放页数
      curP: 0,
    };
  },
  mounted() {
    setInterval(() => {
      this.curP++;
      if (this.curP >= this.images.length) this.curP = 0;
    }, 2000);
  },
};
</script>

<style scoped>
.youji {
  background-color: aquamarine;
}
.title {
  font-size: 25px;
  margin-left: 10px;
  padding-top: 10px;
}
.img {
  margin: 20px 10px;
}
.img > div:first-child > img {
  width: 100%;
  border-top-left-radius: 5px;
  border-top-right-radius: 5px;
}
.img > div:first-child {
  border-radius: 5px;
  background-color: white;
}
.img > div:first-child > div {
  text-align: center;
  font-size: 20px;
  padding: 15px 0;
}
.img > div:last-child {
  margin: 0 auto;
}

.img > div:last-child > img {
  width: 60px;
  margin: 10px 5px;
  border-radius: 10px;
  padding: 5px;
}
.active {
  border-bottom: 1px solid red;
}
.foot {
  display: flex;
  margin: 0 15px;
  margin-bottom: 15px;
}
.foot > div:first-child {
  width: 50%;
}
.foot > div:first-child > h3 {
  margin: 10px 0;
  font-weight: bold;
  font-size: 18px;
}
.foot > div:first-child > p {
  font-size: 15px;
  padding-bottom: 5px;
  border-bottom: 1px solid saddlebrown;
}
.foot > div:first-child > p > span {
  color: #ff9d00;
}
.foot > div:last-child {
  width: 50%;
}
.foot > div:last-child > img {
  width: 100%;
  border-radius: 5px;
}
</style>
